<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="shortcut icon" href="https://wx.gtimg.com/core/favicon.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="./css/public.css"/>
		<title>账户首页 - 微信支付商户平台</title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				background: #fafbfc;
				color: #333333;
			}
			/* 中间主体 */
			.main{
				width: 1184px;
				margin: 40px auto;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
			.main-l{
				width: 800px;
				padding: 26px;
				background: #FFFFFF;
				border: 1px solid #e7eaf0;
			}
			.numTit{
				display: flex;
				flex-direction: row;
				margin-bottom: 10px;
			}
			.numTit>div{
				width: 266px;
				display: flex;
				flex-direction: column;
				align-items: center;
				height: fit-content;
				border-right: 1px solid #e7eaf0;
			}
			.numTit>div:last-child{
				border-right: none;
			}
			.numTit>div>div:nth-child(1){
				color: #8d8d8d;
				margin-bottom: 2px;
			}
			.numTit>div>div:nth-child(2){
				font-size: 22px;
				line-height: 35px;
			}
			.numTit>div>div{
				display: flex;
				flex-direction: row;
			}
			.numTit>div>div>div{
				color: #4466AD;
			}
			.numTit>div>div>div:hover{
				cursor: pointer;
				text-decoration:underline;
			}
			.ico-msg-s{
				display: block;
				width: 18px;
				height: 18px;
				background: url(./img/sprite.png) no-repeat;
				background-position: -180px -122px;
				position: relative;
				top: 9px;
				margin-left: 14px;
				position: relative;
				font-style: normal;
			}
			.numtitTxt{
				width: 252px;
				padding: 20px;
				position: absolute;
				top: 31px;
				left: -140px;
				font-size: 14px;
				background: #FFFFFF;
				border-radius: 4px;
				box-shadow: 0 0px 2px 1px #E0E0E0;
				display: none;
			}
			.numtitTxt>div{
				display: flex;
				flex-direction: row;
				line-height: 1.6;
			}
			.numtitTxt>div:nth-child(3){
				color: #4466AD;
				cursor: pointer;
				user-select: none;
			}
			.numtitTxt>div:nth-child(3):hover{
				text-decoration: underline;
			}
			.numtitTxt>div>div:nth-child(1){
				width: 110px;
				color: #999999;
			}
			.ico-jian{
				border-color: transparent transparent #ffffff;
				border-style: dashed dashed solid;
				border-width: 0 8px 8px;
				position: absolute;
				top: 23px;
				display: none;
			}
			.ico-jian1{
				border-color: transparent transparent #ffffff;
				border-style: dashed dashed solid;
				border-width: 0 8px 8px;
				position: absolute;
				top: 22px;
				border-bottom-color: #E0E0E0;
				display: none;
			}
			.ico-jian2{
				width: 20px;
				height: 50px;
				position: absolute;
				top: -20px;
				left: 139px;
			}
			.ico-msg-s:hover .numtitTxt,.ico-msg-s:hover .ico-jian,.ico-msg-s:hover .ico-jian1,.ico-msg-s:hover .ico-jian2{
				display: block;
			}
			.left-t{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 0 0 12px;
				margin-bottom: 40px;
				border-bottom: 1px solid #e7eaf0;
			}
			.left-t .ico-docu{
				display: block;
				width: 31px;
				height: 31px;
				background: url(./img/sprite1.png) no-repeat;
				background-position: -153px 0;
				margin-top: 9px;
			}
			.left-t img{
				width: 60px;
				height: 60px;
			}
			.sjContent{
				width: 100%;
			}
			.sjContent img{
				width: 100%;
			}
			.sjContent .jsNum{
				width: 99%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 12px;
				margin-top: -6px;
				padding-bottom: 40px;
			}
			.sjContent .banner{
				width: 100%;
				border-top: 1px solid #e7eaf0;
				padding-top: 16px;
			}
			.main-r{
				width: 316px;
				height: auto;
				padding: 26px 0;
				background: #FFFFFF;
				border: 1px solid #e7eaf0;
				font-size: 14px;
			}
			.right-t{
				color: #8d8d8d;
				padding: 4px 26px 22px;
			}
			.right-t>div{
				padding-bottom: 10px;
				display: flex;
			}
			.right-t>div>div:nth-child(1){
				width: 71px;
			}
			.right-t .ico-help{
				display: inline-block;
				width: 18px;
				height: 18px;
				margin-left: 7px;
				background: url(./img/sprite.png) no-repeat;
				background-position: -80px -122px;
				position: relative;
				top: 3px;
			}
			.right-t .t-lm{
				display: flex;
				justify-content: space-between;
			}
			.right-t .t-lm>div:nth-child(2){
				flex: 1;
				font: 14px/1.6 "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
			}
			.ico-top{
				display: inline-block;
				width: 17px;
				height: 9px;
				margin-left: 5px;
				background: url(./img/sprite.png) no-repeat;
				background-position: -156px -216px;
			}
			.ico-new{
				display: inline-block;
				width: 17px;
				height: 9px;
				margin-left: 5px;
				background: url(./img/sprite.png) no-repeat;
				background-position: -118px -216px;
			}
			.ico-gl{
				display: inline-block;
				width: 17px;
				height: 9px;
				margin-left: 5px;
			}
			.right-tit{
				margin: 15px 30px;
				padding-left: 10px;
				border-left: 3px solid #00c250;
			}
			.right-txt{
				padding: 7px 26px;
				padding-bottom: 36px;
				border-top: 1px solid #e7eaf0;
				border-bottom: 1px solid #e7eaf0;
			}
			.right-txt>div{
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				height: 39px;
				line-height: 39px;
				border-bottom: 1px dashed #e7eaf0;
			}
			.right-txt>div span{
				flex: 1;
				display: inline-block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow:ellipsis;
			}
			.move{
				border-bottom: none !important;
			}
			/* 右侧帮助栏 */
			.bzl{
				width: 40px;
				position: fixed;
				right: 5px;
				bottom: 170px;
				z-index: 999;
				color: #FFFFFF;
				border-radius: 4px;
				overflow: hidden;
			}
			.bzl>div{
				background: #00c250;
				margin-bottom: 1px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 4px 0;
			}
			.bzl>div:last-child{
				margin-bottom: none;
			}
			.bzl>div>div{
				width: 18px;
				line-height: 20px;
				text-align: center;
				padding: 8px 0;
			}
			.ico-miniapp{
				display: inline-block;
				width: 18px;
				height: 32px;
				background: url(./img/sprite.png) no-repeat;
				background-position: -292px -69px;
			}
			.ico-down{
				display: inline-block;
				width: 18px;
				height: 32px;
				background: url(./img/sprite.png) no-repeat;
				background-position: -272px -69px;
			}
			.ico-edit{
				display: inline-block;
				width: 18px;
				height: 32px;
				background: url(./img/sprite.png) no-repeat;
				background-position: -252px -69px;
			}
			/*  */
			.xq{
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.xq-main{
				width: 700px;
				z-index: 9999;
				background: #fff;
				border: 1px solid #E0E0E0;
				border-radius: 4px;
			}
			.xq-main>div:nth-child(1){
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 16px;
				padding: 25px 32px;
			}
			.ico-cls{
				display: inline-block;
				width: 20px;
				height: 20px;
				background: url(./img/sprite.png) no-repeat;
				background-position: 0px -166px;
			}
			.xq-main>div:nth-child(2){
				color: #8d8d8d;
				width: 100%;
				text-align: center;
			}
			.xq-main>div:nth-child(3){
				font-size: 30px;
				margin-bottom: 30px;
				width: 100%;
				text-align: center;
			}
			.xq-main>div:nth-child(4){
				background: #fafafa;
				color: #999;
				padding: 16px 8px;
				border-top: 1px solid #EEE;
				border-bottom: 1px solid #EEE;
				display: flex;
				flex-direction: row;
				margin: 0 32px;
			}
			.xq-main>div:nth-child(5){
				padding: 16px 8px;
				border-bottom: 1px solid #EEE;
				display: flex;
				flex-direction: row;
				margin: 0 32px;
				margin-bottom: 45px;
			}
			.cxBtn{
				flex: 1;
				text-align: right;
				color: #4466AD;
				cursor: pointer;
			}
			.cxBtn:hover{
				text-decoration: underline;
			}
			.queren{
				display: flex;
				align-items: center;
				justify-content: center;
				border-top: 1px solid #EEE;
				padding: 20px 0;
			}
			.aqBtn{
				display: inline-block;
				padding: 0 36px;
				height: 38px;
				line-height: 38px;
				border-radius: 4px;
				cursor: pointer;
				background: #00C250;
				color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<!-- 头部 -->
		<div class="head">
			<div class="headContent-t">
				<div>
					<i class="ico-news"></i>
					消息中心
				</div>
				<div>
					<i class="ico-search"></i>
					服务商搜索
				</div>
				<div>
					<i class="ico-help"></i>
					帮助中心
				</div>
				<div>
					<i class="ico-docu"></i>
					我的账号
					<span class="arrow"></span>
				</div>
			</div>
		</div>
		<div class="headContent-b">
			<div>
				<img src="./img/logo.png" >
				<div class="headContent-r">
					<ul>
						<li class="selected">
							<a href="#" style="color: #00C250;">首页</a>
						</li>
						<li>
							<a href="transaction.html">交易中心</a>
						</li>
						<li>
							<a href="account.html">账户中心</a>
						</li>
						<li>
							<a href="#">营销中心</a>
						</li>
						<li>
							<a href="product.html">产品中心</a>
						</li>
						<li>
							<a class="ab" href="#">数据中心</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 中间主图 -->
		<div class="main">
			<!-- 右边 -->
			<div class="main-l">
				<div class="left-t">
					<i class="ico-docu"></i>
					<img src="img/url_to_qrcode.png" >
				</div>
				<div class="sjContent">
					<div class="numTit">
						<div>
							<div>基本账户(元)</div>
							<div>18,847.09<i class="ico-msg-s">
								<div class="numtitTxt">
									<div>
										<div>可用余额(元)：</div>
										<div>0.87</div>
									</div>
									<div>
										<div>不可用余额(元)：</div>
										<div>18,846.22</div>
									</div>
									<div class="cxyeBtn">查看不可用余额详情</div>
									<i class="ico-jian2"></i>
								</div>
								<i class="ico-jian1"></i>
								<i class="ico-jian"></i>
							</i></div>
							<div>
								<div style="margin-right: 19px;">充值</div>
								<div>资金流水</div>
							</div>
						</div>
						<div>
							<div>手续费账户(元)</div>
							<div>未开通</div>
						</div>
						<div>
							<div>运营账户(元)</div>
							<div>未开通</div>
						</div>
					</div>
					<img src="img/icon-sj.png" >
					<div class="jsNum">
						<span>2021-09-06</span>
						<span>2021-09-07</span>
						<span>2021-09-08</span>
						<span>2021-09-09</span>
						<span>2021-09-10</span>
						<span>2021-09-11</span>
						<span>2021-09-12</span>
					</div>
					<img class="banner" src="img/banner.png" >
				</div>
			</div>
			<!-- 左边 -->
			<div class="main-r">
				<div class="right-t">
					<div>预留信息：<span style="color: #00c250;">未设置</span><i class="ico-help"></i></div>
					<div>商户简称：花荄农业贸易</div>
					<div><div>企业名称：</div>绵阳市安州区花荄兄弟水站</div>
					<div class="t-lm"><div>行业类目：</div><div>餐饮、零售批发、交通出行、生活娱乐服务、培训教育机构、民营医疗机构、代理缴纳话费等</div></div>
					<div>费率周期：<span style="color: #4466AD;">点击查询</span></div>
				</div>
				<div class="right-b">
					<div class="right-tit">平台公告</div>
					<div class="right-txt">
						<div><span>[07.30] 关于打击假冒“智慧商圈”名义进行欺诈等违规行为的声明​</span><i class="ico-top"></i></div>
						<div><span>[07.22] 北京农商银行系统维护通知</span><i class="ico-new"></i></div>
						<div><span>[07.07] 7月8日微信支付升级维护通知</span><i class="ico-gl"></i></div>
						<div><span>[06.11] 支付告警模块临时下线通知</span><i class="ico-gl"></i></div>
						<div><span>[06.03] 6月4日微信支付升级维护通知</span><i class="ico-gl"></i></div>
						<div class="move">更多>></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 不可用余额详情 -->
		<div class="xq">
			<div class="xq-main">
				<div>
					<div>不可用余额详情</div>
					<div class="ico-cls" style="cursor: pointer;"></div>
				</div>
				<div>不可用余额(元)</div>
				<div>18,846.22</div>
				<div>
					<div style="width: 213px;">冻结原因</div>
					<div style="width: 213px;">冻结金额(元)</div>
					<div style="flex: 1;text-align: right;">操作</div>
				</div>
				<div>
					<div style="width: 213px;">风控处罚</div>
					<div style="width: 213px;">18,846.22</div>
					<div class="cxBtn">查看违约记录</div>
				</div>
				<div class="queren">
					<div class="aqBtn">确认</div>
				</div>
			</div>
		</div>
		<!-- 不可用余额详情结束 -->
		<!-- 右侧帮助栏 -->
		<div class="bzl">
			<div><i class="ico-miniapp"></i></div>
			<div><i class="ico-down"></i></div>
			<div><i class="ico-edit"></i></div>
			<div><div>获取帮助</div></div>
		</div>
		<!-- 右侧帮助栏结束 -->
		<!-- 底部 -->
		<div class="foot">
			<div class="footContent">
				<div>
					<div class="footTit">关于我们</div>
					<div>关于微信支付</div>
					<div>平台使用协议</div>
					<div>支付服务协议</div>
					<div>联系我们</div>
				</div>
				<div>
					<div class="footTit">服务支持</div>
					<div>开发文档（商户）</div>
					<div>开发文档（服务商）</div>
					<div>物料下载</div>
				</div>
				<div>
					<div class="footTit">友情链接</div>
					<div>微信开放平台</div>
					<div>微信公众平台</div>
					<div>企业微信</div>
				</div>
				<div>
					<div class="footTit">客服帮助</div>
					<div>自助服务专区</div>
					<div>客服：95017-2</div>
					<div>（工作时间：09:00-22:00）</div>
				</div>
			</div>
			<div class="foot-b">Powered By Tencent & Tenpay　Copyright 2005-2021 Tenpay All Rights Reserved.</div>
		</div>
		<script src="./js/jq.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('.xq').hide()
				$('.cxyeBtn').on('click',function(){
					$('.xq').show()
				})
				$('.ico-cls').on('click',function(){
					$('.xq').hide()
				})
				$('.aqBtn').on('click',function(){
					$('.xq').hide()
				})
				$('.cxBtn').on('click',function(){
					window.open("account.html?x=1");
				})
			})
		</script>
	</body>
</html>
